import React, { useState } from 'react';
import { useVoiceRecording } from '../hooks/useVoiceRecording';

const VoiceTest: React.FC = () => {
    const {
        isRecording,
        isProcessing,
        error: voiceError,
        result: voiceResult,
        startRecording,
        stopRecording,
        clearResult,
        useFallback,
        switchToFallback,
        switchToXunfei
    } = useVoiceRecording();

    const [logs, setLogs] = useState<string[]>([]);

    const addLog = (message: string) => {
        const timestamp = new Date().toLocaleTimeString();
        setLogs(prev => [...prev, `[${timestamp}] ${message}`]);
    };

    const handleStartRecording = () => {
        addLog('开始录音...');
        startRecording();
    };

    const handleStopRecording = () => {
        addLog('停止录音...');
        stopRecording();
    };

    const handleClearLogs = () => {
        setLogs([]);
        clearResult();
    };

    return (
        <div style={{ padding: '20px', maxWidth: '800px', margin: '0 auto' }}>
            <h1>语音识别测试页面</h1>

            <div style={{ marginBottom: '20px' }}>
                <h2>当前状态</h2>
                <p>录音中: {isRecording ? '是' : '否'}</p>
                <p>处理中: {isProcessing ? '是' : '否'}</p>
                <p>使用备用服务: {useFallback ? '是' : '否'}</p>
                <p>错误: {voiceError || '无'}</p>
                <p>识别结果: {voiceResult || '无'}</p>
            </div>

            <div style={{ marginBottom: '20px' }}>
                <h2>控制按钮</h2>
                <button
                    onClick={handleStartRecording}
                    disabled={isRecording || isProcessing}
                    style={{ marginRight: '10px', padding: '10px 20px' }}
                >
                    开始录音
                </button>
                <button
                    onClick={handleStopRecording}
                    disabled={!isRecording}
                    style={{ marginRight: '10px', padding: '10px 20px' }}
                >
                    停止录音
                </button>
                <button
                    onClick={handleClearLogs}
                    style={{ marginRight: '10px', padding: '10px 20px' }}
                >
                    清除日志
                </button>
            </div>

            <div style={{ marginBottom: '20px' }}>
                <h2>服务切换</h2>
                <button
                    onClick={switchToXunfei}
                    disabled={!useFallback}
                    style={{ marginRight: '10px', padding: '10px 20px' }}
                >
                    切换到讯飞API
                </button>
                <button
                    onClick={switchToFallback}
                    disabled={useFallback}
                    style={{ marginRight: '10px', padding: '10px 20px' }}
                >
                    切换到浏览器原生
                </button>
            </div>

            <div>
                <h2>调试日志</h2>
                <div style={{
                    height: '300px',
                    overflow: 'auto',
                    border: '1px solid #ccc',
                    padding: '10px',
                    backgroundColor: '#f5f5f5',
                    fontFamily: 'monospace',
                    fontSize: '12px'
                }}>
                    {logs.map((log, index) => (
                        <div key={index} style={{ marginBottom: '5px' }}>
                            {log}
                        </div>
                    ))}
                </div>
            </div>

            <div style={{ marginTop: '20px' }}>
                <h2>使用说明</h2>
                <ol>
                    <li>点击"开始录音"按钮</li>
                    <li>对着麦克风说话</li>
                    <li>点击"停止录音"按钮</li>
                    <li>查看识别结果和调试日志</li>
                    <li>如果讯飞API失败，会自动切换到浏览器原生服务</li>
                </ol>
            </div>
        </div>
    );
};

export default VoiceTest;